<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            position: relative;
        }

        .wrap video {
            width: 100%;
        }

        .wrap .big_box {
            width: 450px;
            height: 60px;
            margin: auto;
            position: absolute;
            top: 50px;
            left: 35%;
        }

        .wrap .big_box .one {
            display: inline-block;
            width: 100px;
            margin: 0 50px 0 80px;
            text-align: center;
        }

        .wrap .big_box .one h3 {
            width: 100px;
        }

        .wrap .big_box .one :hover {
            border-bottom: 5px solid grey;
        }

        .wrap .big_box .two {
            left: 200px;
            display: inline-block;
            width: 100px;
            margin: 0 50px 0 50px;
            text-align: center;
        }

        .wrap .big_box .two h3 {
            width: 100px;
        }

        .wrap .two :hover {
            border-bottom: 5px solid grey;
        }

        .wrap .tab_two {
            position: absolute;
            top: 10%;
            left: 35%;
        }

        .wrap .Sign_in {
            width: 450px;
            height: 450px;
            margin: 50px auto;
            text-align: center;
            position: absolute;
            left: 60%;
            border: 2px solid grey;
        }

        .wrap .Sign_in h3 {
            width: 300px;
            margin: 20px auto;
        }

        .wrap .Sign_in label {
            display: inline-block;
            width: 70px;
            text-align: right;
        }

        .wrap .Sign_in input {
            margin: 10px;
        }

        .wrap .Sign_in button {
            width: 100px;
            height: 30px;
        }

        .wrap .Log_in {
            width: 450px;
            height: 450px;
            margin: 50px auto;
            text-align: center;
            position: absolute;
            left: 60%;
            border: 2px solid grey;
        }

        .wrap .Log_in label {
            display: inline-block;
            width: 70px;
            text-align: right;
        }

        .wrap .Log_in h3 {
            width: 300px;
            margin: 20px auto;
        }

        .wrap .Log_in input {
            margin: 10px;
        }
    </style>
</head>

<body>

    <div class="wrap">
        <video autoplay muted loop>
            <source src="./山水画pro.mp4">
        </video>
        <div class="big_box">

            <div class="tab_one">
                <div class="one">
                    <h3>用户注册</h1>
                </div>
                <div class="two">
                    <h3>用户登陆</h1>
                </div>
            </div>
        </div>


        <div class="tab_two">
            <div class="Sign_in"> <!-- 注册的意思 -->
                <h1>欢迎注册</h1>
                <h3>您需要先注册才可以登录 •̀֊•́✧</h3>
                <form action="#">
                    <label>用户名:</label><input type="text" id="add_name"><br>
                    <label>密码:</label><input type="password" id="add_pwd"><br>
                    <!-- <label>确认密码:</label><input type="password" placeholder="再检查一下!!"><br> -->
                    <button class="signin">提交注册</button>
                </form>
            </div>

            <div class="Log_in"> <!-- 登录的意思 -->
                <h1>欢迎登录</h1>
                <h3>恭喜你已经注册完毕啦 •̀֊•́✧</h3>
                <form action="#">

                    <label for="">用户名:</label><input type="text"><br>
                    <label for="">密码:</label><input type="password"><br>

                </form>
                <button class="login">提交登录</button>
            </div>
        </div>


    </div>




    <script src="./helloworld/node_modules/jquery/dist/jquery.js"></script>
    <script>
        //tab 切换
        $('.Log_in').css('display', 'none')
        $('.one').click(() => {
            $('.Sign_in').css('display', 'inline-block')
            $('.Log_in').css('display', 'none')
        })

        $('.two').click(() => {
            $('.Sign_in').css('display', 'none')
            $('.Log_in').css('display', 'inline-block')
        })
    </script>


    <script>

        // var inp3 = $('input').eq(2).val();
        // var inp4 = $('input').eq(3).val();

        // $('.signin').click(() => {
        //     var inp1 = $('#add_name').val();
        //     var inp2 = $('#add_pwd').val();
        //     $.ajax({
        //         url: 'http://localhost:3000/users/add',
        //         type: 'post',
        //         data: {
        //             name: inp1,
        //             password: inp2,
        //         },
        //         dataType: 'json',
        //         success: function (res) {
        //             console.log(res);
        //         },
        //     })
        // })


        //注册
        $('.signin').click(() => {
                var inp1 = $('#add_name').val();
                var inp2 = $('#add_pwd').val();
                // 检查用户名是否为空
                if (!inp1 || inp1.trim() === '') {
                    alert("用户名不能为空！");
                    return;
                }
                // 检查密码是否为空
                if (!inp2 || inp2.trim() === '') {
                    alert("密码不能为空！");
                    return;
                }
                $.ajax({
                    url: 'http://localhost:3000/users/add',
                    type: 'post',
                    data: {
                        name: inp1,
                        password: inp2,
                    },
                    dataType: 'json',
                    success: function (res) {
                        console.log(res);
                    },
                    error: function (xhr, status, error) {
                        console.error("请求失败：", status, error);
                        alert("注册失败，请重试！");
                    }
                });
            });


        // $('.login').click(() => {
        //     var inp3 = $('input').eq(2).val();
        //     var inp4 = $('input').eq(3).val();
        //     $.ajax({
        //         url: 'http://localhost:3000/users/login',
        //         type: 'post',
        //         data: {
        //             name: inp3,
        //             password: inp4,
        //         },
        //         dataType: 'json',
        //         success: function (res) {
        //             console.log(res);
        //         },
        //     })
        // })

        //登录
        $('.login').click(() => {
            // 在点击事件处理函数内部获取最新的输入元素值
            var inp3 = $('input').eq(2).val();
            var inp4 = $('input').eq(3).val();
            $.ajax({
                url: 'http://localhost:3000/users/login',
                type: 'post',
                data: {
                    name: inp3,
                    password: inp4
                },
                dataType: 'json',
                success: function (res) {
                    // 判断服务器返回的结果是否表示登录成功
                    if (res.msg=="登录成功") {
                        alert(res.msg);
                        // 登录成功，跳转到首页或用户页面
                        localStorage.setItem("token", res.token);
                        location.assign('./相册跳转页.html')

                    } else {
                        // 登录失败，显示错误消息
                        alert(res.msg || "登录失败，请重试！");
                    }
                },
                error: function (xhr, status, error) {
                    console.error("AJAX 请求失败：", status, error);
                    alert("登录失败，请重试！");
                }
            });
        });
    </script>
</body>

</html>